<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #a1 {
        width: 120px;
        height: 240px;
        border: 1px solid #000;
        position: relative;
        margin: 66px auto;
        overflow: hidden;
    }

    #a1 img {
        position: absolute;
        top: 15px;
        left: 0px;
        animation: kxf 1s steps(8) infinite;
        -webkit-animation: kxf 1s steps(8) infinite;
    }

    @keyframes kxf {
        from {
            left: 0px;
        }

        to {
            left: -960px
        }
    }

    @-webkit-keyframes kxf {
        from {
            left: 0px;
        }

        to {
            left: -960px
        }
    }
</style>

<body>
    <div id="a1">
        <img src="./寇新峰的动画图片/walking.png" alt="走路" title="动图">
    </div>
</body>

</html>